/** 操作节点  */
/* 
选择节点：使用document.querySelector或document.querySelectorAll来选择DOM中的元素。
创建节点：使用document.createElement来创建新的元素节点。
添加节点：使用parentNode.appendChild、parentNode.insertBefore等方法将新节点添加到DOM中。
删除节点：使用node.removeChild或parentNode.removeChild来删除节点。
替换节点：使用parentNode.replaceChild来替换节点。
修改节点属性：使用element.setAttribute、element.removeAttribute等方法来修改节点的属性。
*/
document.querySelector
document.createElement
parentNode.appendChild
node.removeChild
parentNode.replaceChild
element.setAttribute
/**Document类型 */
// 文档对象（Document）包括许多属性，其中一些常用的属性包括：
document.URL//：返回文档的URL。
document.title//：获取或设置文档的标题。
document.body//：返回文档的<body>元素。
document.head//：返回文档的<head>元素。
document.cookie//：设置或返回与当前文档相关的所有 cookie。
document.domain//：设置或返回当前文档的域名。
document.lastModified//：返回文档最后修改的日期和时间。

document.links//：返回文档中所有带有 href 属性的 <a> 和 <area> 元素。
document.images//：返回文档中所有的图片元素（<img>）。
document.forms//：返回文档中所有的表单元素（<form>）。
document.scripts//：返回文档中所有的脚本元素（<script>）。、

/**DOM兼容性检测：*/
/* 
功能检测：使用JavaScript编写代码来检测特定的DOM功能是否受到支持。例如，您可以检查某个属性或方法是否存在，以确定浏览器是否支持该功能。
浏览器嗅探（Browser Sniffing）：检测浏览器的用户代理字符串，以确定浏览器类型和版本，并据此进行兼容性处理。
但请注意，浏览器嗅探可能会导致一些问题，因为用户代理字符串可以被修改或伪装。
Modernizr库：使用Modernizr JavaScript库可以方便地进行各种功能特性的检测，以确定浏览器对特定功能的支持情况。
 */

/**文档写入（open，write，writeln，close） */
document.write()//这是最简单的方法，它可以直接将内容写入到文档中。但要注意，如果在文档加载完成后再使用document.write()，它会覆盖整个文档内容。
element.innerHTML//通过修改元素的innerHTML属性，可以向特定元素中写入HTML内容。
document.createElement()//和相关方法您可以使用，然后使用。
document.createElement()//创建新的元素节点
appendChild()//等方法将其添加到文档中

/**获取元素属性：设置元素属性：移出元素属性： */
element.getAttribute('属性名')
element.setAttribute('属性名', 'value')
element.removeAttribute('属性名') 
/**
 注释节点（comment node）是DOM树中的一种节点类型，
用于表示HTML或XML文档中的注释内容。注释节点是DOM树中的一种特殊节点，
它的内容不会被显示在页面上，通常用于添加开发者的注释或临时注释 
*/
/*
创建注释节点：使用document.createComment()方法可以创建一个新的注释节点，例如：var commentNode = document.createComment("这是一个注释节点");。
将注释节点添加到元素中：使用appendChild()或insertBefore()等方法，将注释节点添加到指定的元素中，例如：element.appendChild(commentNode)。
获取注释节点的内容：通过注释节点的nodeValue属性可以获取注释节点的内容，例如：var content = commentNode.nodeValue。 
 */
document.createComment();

/**DocumentFragment类型 */
/* 
DocumentFragment（文档片段）是DOM中的一种节点类型，它表示文档的轻量级容器，
可以包含和操作一组节点，但它本身不是文档树的一部分。使用文档片段可以在内存中操作一组节点，
然后一次性将它们添加到文档中，以减少DOM操作的次数，提高性能。
*/
//创建文档片段：使用document.createDocumentFragment()方法可以创建一个新的文档片段，
var fragment = document.createDocumentFragment();
//向文档片段添加节点：使用appendChild()或insertBefore()等方法，将节点添加到文档片段中，例如：
fragment.appendChild(childNode)
//将文档片段添加到文档中：将文档片段作为一个整体，一次性地添加到文档中，例如：
document.body.appendChild(fragment)

/**Attr类型 */
//在DOM中，Attr（属性）类型表示HTML或XML元素的属性，例如id、class、src等。每个Attr对象对应于元素的一个属性，它包含属性的名称和值。
//在JavaScript中，您可以通过以下方式创建和操作Attr对象：
//获取元素的属性：通过元素节点的getAttributeNode()或getAttribute()方法可以获取指定属性的Attr对象或属性值，例如：
var attrNode = element.getAttributeNode('id')
//创建新的属性：使用document.createAttribute()方法可以创建一个新的Attr对象，例如：
var newAttr = document.createAttribute('data-custom')
//设置元素的属性：通过元素节点的setAttributeNode()或setAttribute()方法可以设置或添加新的属性，例如：
element.setAttribute('data-custom', 'value')
//删除元素的属性：通过元素节点的removeAttributeNode()或removeAttribute()方法可以删除指定的属性，例如：
element.removeAttribute('data-custom')
//Attr对象在DOM操作中经常用于获取、设置和删除元素的属性，以及动态操作元素的属性信息。

/**MutationObserver接口 */
/* 
MutationObserver接口是JavaScript中用于监视DOM树变化的接口。它提供了一种异步的方式来观察DOM树的变化，并在发生变化时执行回调函数。
可以使用MutationObserver接口来监视以下类型的DOM变化：
子节点的添加或移除
节点属性的修改
节点内容的修改
节点的顺序变化
使用MutationObserver接口的基本流程如下：
创建一个新的MutationObserver对象，传入一个回调函数作为参数，该回调函数将在DOM变化时被调用。
使用MutationObserver对象的observe()方法来指定要观察的目标节点以及要观察的DOM变化类型。
当指定的DOM变化发生时，MutationObserver对象会调用回调函数，并传入一个MutationRecord对象的数组作为参数，该数组包含了发生的DOM变化的详细信息。
在回调函数中处理DOM变化的逻辑，例如更新UI、执行其他操作等。
MutationObserver接口提供了一种灵活且高效的方式来监视DOM树的变化，适用于需要实时响应DOM变化的场景。
 */

/**disconnect方法 */
/* 
disconnect() 方法是 MutationObserver 接口提供的一个方法，
用于停止观察对 DOM 树所做的更改。
调用 disconnect() 方法后，MutationObserver 将不再触发回调函数，也不会再观察任何 DOM 变化
 */

/**MutationObserverInit对象 */
/* 
MutationObserverInit 对象是用于配置 MutationObserver 的初始化选项的。它是一个包含各种属性的对象，用于指定要观察的 DOM 变化类型。
MutationObserverInit 对象的属性包括：
childList：布尔值，表示是否观察目标节点的子节点的添加或移除。
attributes：布尔值，表示是否观察目标节点属性的修改。
characterData：布尔值，表示是否观察目标节点内容或文本节点的修改。
subtree：布尔值，表示是否观察目标节点的所有后代节点。
attributeOldValue：布尔值，表示是否在观察属性修改时记录属性的旧值。
characterDataOldValue：布尔值，表示是否在观察内容或文本节点修改时记录节点内容的旧值。
attributeFilter：数组，用于指定要观察的特定属性名称。
通过配置 MutationObserverInit 对象的属性，可以灵活地指定 MutationObserver 观察的 DOM 变化类型和相关选项。
 */

/**异步回调及记录队列 */
// takeRecords方法清空任务队列

